<!-- 彩色同行XXXXXXXXX.html -->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动起来</title>
	<style>
	.progress{
		width:500px;
		background: #ccc;
		height: 50px;
		margin: 150px auto;
	}
	#bar1,#bar2,#bar3,#bar4,#bar5{
		height: 100%;
		width:50px;
		border-radius: 10px;
		position: relative;
		margin-top: 10px;
	}
	.hengxian1{
		border: 1px solid white;
		width: 490px;
		position: relative;
		top:8px;
	}
	.hengxian2{
		border: 1px solid white;
		width: 490px;
		position: relative;
		top:17px;
	}
	.hengxian3{
		border: 1px solid white;
		width: 490px;
		position: relative;
		top:26px;
	}
	.hengxian4{
		border: 1px solid white;
		width: 490px;
		position: relative;
		top:35px;
	}
	.shuxian1{
		border-right: 3px solid white;
		height:52px;
		position: relative;
		left:-40px;
		top:-9px;
	}
	.shuxian2{
		border-right: 3px solid white;
		height:52px;
		position: relative;
		left:-31px;
		top:-61px;
	}
	.shuxian3{
		border-right: 3px solid white;
		height:52px;
		position: relative;
		left:-22px;
		top:-113px;
	}
	.shuxian4{
		border-right: 3px solid white;
		height:52px;
		position: relative;
		left:-13px;
		top:-165px;
	}
	.shuxian5{
		border-right: 3px solid white;
		height:52px;
		position: relative;
		left:-4px;
		top:-217px;
	}
	.shuxian6{
		border-right: 3px solid white;
		height:52px;
		position: relative;
		left:5px;
		top:-269px;
	}
	.shuxian7{
		border-right: 3px solid white;
		height:52px;
		position: relative;
		left:14px;
		top:-321px;
	}
	.shuxian8{
		border-right: 3px solid white;
		height:52px;
		position: relative;
		left:23px;
		top:-373px;
	}
	.shuxian9{
		border-right: 3px solid white;
		height:52px;
		position: relative;
		left:32px;
		top:-425px;
	}
	.shuxian10{
		border-right: 3px solid white;
		height:54px;
		position: relative;
		left:41px;
		top:-477px;
	}
	#shuxian{
		border-right: 3px solid white;
		height:52px;
		position: relative;
	}
	.shuxian11{
		left:50px;
		top:-529px;
	}
	.shuxian12{
		left:59px;
		top:-581px;
	}
	.shuxian13{
		left:68px;
		top:-633px;
	}
	.shuxian14{
		left:77px;
		top:-685px;
	}
	.shuxian15{
		left:86px;
		top:-737px;
	}
	.shuxian16{
		left:95px;
		top:-789px;
	}
	.shuxian17{
		left:104px;
		top:-841px;
	}
	.shuxian18{
		left:113px;
		top:-893px;
	}
	.shuxian19{
		left:122px;
		top:-945px;
	}
	.shuxian20{
		left:131px;
		top:-997px;
	}
	.shuxian21{
		left:140px;
		top:-1049px;
	}
	.shuxian22{
		left:149px;
		top:-1101px;
	}
	.shuxian23{
		left:158px;
		top:-1153px;
	}
	.shuxian24{
		left:167px;
		top:-1205px;
	}
	.shuxian25{
		left:176px;
		top:-1257px;
	}
	.shuxian26{
		left:185px;
		top:-1309px;
	}
	.shuxian27{
		left:194px;
		top:-1361px;
	}
	.shuxian28{
		left:203px;
		top:-1413px;
	}
	.shuxian29{
		left:212px;
		top:-1465px;
	}
	.shuxian30{
		left:221px;
		top:-1517px;
	}
	.shuxian31{
		left:230px;
		top:-1569px;
	}
	.shuxian32{
		left:239px;
		top:-1621px;
	}
	.shuxian33{
		left:248px;
		top:-1673px;
	}
	.shuxian34{
		left:257px;
		top:-1725px;
	}
	.shuxian35{
		left:266px;
		top:-1777px;
	}
	.shuxian36{
		left:275px;
		top:-1829px;
	}
	.shuxian37{
		left:284px;
		top:-1881px;
	}
	.shuxian38{
		left:293px;
		top:-1933px;
	}
	.shuxian39{
		left:302px;
		top:-1985px;
	}
	.shuxian40{
		left:311px;
		top:-2037px;
	}
	.shuxian41{
		left:320px;
		top:-2089px;
	}
	.shuxian42{
		left:329px;
		top:-2141px;
	}
	.shuxian43{
		left:338px;
		top:-2193px;
	}
	.shuxian44{
		left:347px;
		top:-2245px;
	}
	.shuxian45{
		left:356px;
		top:-2297px;
	}
	.shuxian46{
		left:365px;
		top:-2349px;
	}
	.shuxian47{
		left:374px;
		top:-2401px;
	}
	.shuxian48{
		left:383px;
		top:-2453px;
	}
	.shuxian49{
		left:392px;
		top:-2505px;
	}
	.shuxian50{
		left:401px;
		top:-2557px;
	}
	#persent{
		position: absolute;
		left:225px;
		top:-225px;
		font-family: "黑体";
		width: 50px;
		height: 500px;
		transform:rotate(90deg);
		animation:mymove1 1s infinite;
	}
	@keyframes mymove1{
		0%{background: linear-gradient(white 10%,#B848FF,#6F57BC,blue,#6B9BC3,#4DE923,yellow,#FA9429,red);}
		12%{ background:linear-gradient(white 10%,#B848FF,blue,#6B9BC3,#4DE923,yellow,#FA9429,red,#6F57BC);}
		25%{background: linear-gradient(white 10%,blue,#6B9BC3,#4DE923,yellow,#FA9429,red,#B848FF,#6F57BC);}
		37%{background: linear-gradient(white 10%,#6B9BC3,#4DE923,yellow,#FA9429,red,#B848FF,#6F57BC,blue);}
		50%{ background:linear-gradient(white 10%,#4DE923,yellow,#FA9429,red,#B848FF,#6F57BC,blue,#6B9BC3);}
		62%{ background:linear-gradient(white 10%,yellow,#FA9429,red,#B848FF,#6F57BC,blue,#6B9BC3,#4DE923);}
		75%{ background:linear-gradient(white 10%,#FA9429,red,#B848FF,#6F57BC,blue,#6B9BC3,#4DE923,yellow);}
		87%{ background:linear-gradient(white 10%,red,#B848FF,#6F57BC,blue,#6B9BC3,#4DE923,yellow,#FA9429);}
		100%{ background:linear-gradient(white 10%,#B848FF,#6F57BC,blue,#6B9BC3,#4DE923,yellow,#FA9429,red);}
	}
	#fugai1{
		position: absolute;
		right:-450px;
		top:-1px;
		width: 500px;
		height: 52px;
		background: white;
		/*border: 1px solid blue;*/
		animation:mymove 3s infinite;
	}
	@keyframes mymove{
		0%{right:-610px;}
		10%{right:-450px;}
		20%{right:-530px;}
		30%{right:-450px;}
		40%{right:-750px;}
		50%{right:-450px;}
		60%{right:-480px;}
		70%{right:-450px;}
		80%{right:-750px;}
		90%{right:-450px;}
		100%{right:-610px;}
	}
	#fugai2{
		position: absolute;
		right:-450px;
		top:-1px;
		width: 500px;
		height: 52px;
		background: white;
		/*border: 1px solid blue;*/
		animation:mymov 3s infinite;
	}
	@keyframes mymov{
		0%{right:-710px;}
		10%{right:-450px;}
		20%{right:-900px;}
		30%{right:-450px;}
		40%{right:-470px;}
		50%{right:-450px;}
		60%{right:-530px;}
		70%{right:-450px;}
		80%{right:-660px;}
		90%{right:-450px;}
		100%{right:-710px;}
	}
	#fugai3{
		position: absolute;
		right:-450px;
		top:-1px;
		width: 500px;
		height: 52px;
		background: white;
		/*border: 1px solid blue;*/
		animation:mymo 3s infinite;
	}
	@keyframes mymo{
		0%{right:-790px;}
		10%{right:-450px;}
		20%{right:-680px;}
		30%{right:-450px;}
		40%{right:-930px;}
		50%{right:-450px;}
		60%{right:-700px;}
		70%{right:-450px;}
		80%{right:-510px;}
		90%{right:-450px;}
		100%{right:-790px;}
	}

	#fugai4{
		position: absolute;
		right:-450px;
		top:-1px;
		width: 500px;
		height: 52px;
		background: white;
		/*border: 1px solid blue;*/
		animation:mym 3s infinite;
	}
	@keyframes mym{
		0%{right:-920px;}
		10%{right:-450px;}
		20%{right:-490px;}
		30%{right:-450px;}
		40%{right:-550px;}
		50%{right:-450px;}
		60%{right:-530px;}
		70%{right:-450px;}
		80%{right:-590px;}
		90%{right:-450px;}
		100%{right:-920px;}
	}
	#fugai5{
		position: absolute;
		right:-450px;
		top:-1px;
		width: 500px;
		height: 52px;
		background: white;
		/*border: 1px solid blue;*/
		animation:my 3s infinite;
	}
	@keyframes my{
		0%{right:-850px;}
		10%{right:-450px;}
		20%{right:-650px;}
		30%{right:-450px;}
		40%{right:-800px;}
		50%{right:-450px;}
		60%{right:-800px;}
		70%{right:-450px;}
		80%{right:-700px;}
		90%{right:-450px;}
		100%{right:-850px;}
	}

	</style>
</head>
<body>
	<div class="progress">
		<div id="bar1">
			<div id="persent"></div>
			<div class="hengxian1"></div>
			<div class="hengxian2"></div>
			<div class="hengxian3"></div>
			<div class="hengxian4"></div>
			<div class="shuxian1"></div>
			<div class="shuxian2"></div>
			<div class="shuxian3"></div>
			<div class="shuxian4"></div>
			<div class="shuxian5"></div>
			<div class="shuxian6"></div>
			<div class="shuxian7"></div>
			<div class="shuxian8"></div>
			<div class="shuxian9"></div>
			<div class="shuxian10"></div>
			<div class="shuxian11" id="shuxian"></div>
			<div class="shuxian12" id="shuxian"></div>
			<div class="shuxian13" id="shuxian"></div>
			<div class="shuxian14" id="shuxian"></div>
			<div class="shuxian15" id="shuxian"></div>
			<div class="shuxian16" id="shuxian"></div>
			<div class="shuxian17" id="shuxian"></div>
			<div class="shuxian18" id="shuxian"></div>
			<div class="shuxian19" id="shuxian"></div>
			<div class="shuxian20" id="shuxian"></div>
			<div class="shuxian21" id="shuxian"></div>
			<div class="shuxian22" id="shuxian"></div>
			<div class="shuxian23" id="shuxian"></div>
			<div class="shuxian24" id="shuxian"></div>
			<div class="shuxian25" id="shuxian"></div>
			<div class="shuxian26" id="shuxian"></div>
			<div class="shuxian27" id="shuxian"></div>
			<div class="shuxian28" id="shuxian"></div>
			<div class="shuxian29" id="shuxian"></div>
			<div class="shuxian30" id="shuxian"></div>
			<div class="shuxian31" id="shuxian"></div>
			<div class="shuxian32" id="shuxian"></div>
			<div class="shuxian33" id="shuxian"></div>
			<div class="shuxian34" id="shuxian"></div>
			<div class="shuxian35" id="shuxian"></div>
			<div class="shuxian36" id="shuxian"></div>
			<div class="shuxian37" id="shuxian"></div>
			<div class="shuxian38" id="shuxian"></div>
			<div class="shuxian39" id="shuxian"></div>
			<div class="shuxian40" id="shuxian"></div>
			<div class="shuxian41" id="shuxian"></div>
			<div class="shuxian42" id="shuxian"></div>
			<div class="shuxian43" id="shuxian"></div>
			<div class="shuxian44" id="shuxian"></div>
			<div class="shuxian45" id="shuxian"></div>
			<div class="shuxian46" id="shuxian"></div>
			<div class="shuxian47" id="shuxian"></div>
			<div class="shuxian48" id="shuxian"></div>
			<div class="shuxian49" id="shuxian"></div>
			<div class="shuxian50" id="shuxian"></div>
			<div id="fugai1"></div>
		</div>
		<div id="bar2">
			<div id="persent"></div>
			<div id="fugai2"></div>
			<div class="hengxian1"></div>
			<div class="hengxian2"></div>
			<div class="hengxian3"></div>
			<div class="hengxian4"></div>
			<div class="shuxian1"></div>
			<div class="shuxian2"></div>
			<div class="shuxian3"></div>
			<div class="shuxian4"></div>
			<div class="shuxian5"></div>
			<div class="shuxian6"></div>
			<div class="shuxian7"></div>
			<div class="shuxian8"></div>
			<div class="shuxian9"></div>
			<div class="shuxian10"></div>
			<div class="shuxian11" id="shuxian"></div>
			<div class="shuxian12" id="shuxian"></div>
			<div class="shuxian13" id="shuxian"></div>
			<div class="shuxian14" id="shuxian"></div>
			<div class="shuxian15" id="shuxian"></div>
			<div class="shuxian16" id="shuxian"></div>
			<div class="shuxian17" id="shuxian"></div>
			<div class="shuxian18" id="shuxian"></div>
			<div class="shuxian19" id="shuxian"></div>
			<div class="shuxian20" id="shuxian"></div>
			<div class="shuxian21" id="shuxian"></div>
			<div class="shuxian22" id="shuxian"></div>
			<div class="shuxian23" id="shuxian"></div>
			<div class="shuxian24" id="shuxian"></div>
			<div class="shuxian25" id="shuxian"></div>
			<div class="shuxian26" id="shuxian"></div>
			<div class="shuxian27" id="shuxian"></div>
			<div class="shuxian28" id="shuxian"></div>
			<div class="shuxian29" id="shuxian"></div>
			<div class="shuxian30" id="shuxian"></div>
			<div class="shuxian31" id="shuxian"></div>
			<div class="shuxian32" id="shuxian"></div>
			<div class="shuxian33" id="shuxian"></div>
			<div class="shuxian34" id="shuxian"></div>
			<div class="shuxian35" id="shuxian"></div>
			<div class="shuxian36" id="shuxian"></div>
			<div class="shuxian37" id="shuxian"></div>
			<div class="shuxian38" id="shuxian"></div>
			<div class="shuxian39" id="shuxian"></div>
			<div class="shuxian40" id="shuxian"></div>
			<div class="shuxian41" id="shuxian"></div>
			<div class="shuxian42" id="shuxian"></div>
			<div class="shuxian43" id="shuxian"></div>
			<div class="shuxian44" id="shuxian"></div>
			<div class="shuxian45" id="shuxian"></div>
			<div class="shuxian46" id="shuxian"></div>
			<div class="shuxian47" id="shuxian"></div>
			<div class="shuxian48" id="shuxian"></div>
			<div class="shuxian49" id="shuxian"></div>
			<div class="shuxian50" id="shuxian"></div>
		</div>
		<div id="bar3">
			<div id="persent"></div>
			<div id="fugai3"></div>
			<div class="hengxian1"></div>
			<div class="hengxian2"></div>
			<div class="hengxian3"></div>
			<div class="hengxian4"></div>
			<div class="shuxian1"></div>
			<div class="shuxian2"></div>
			<div class="shuxian3"></div>
			<div class="shuxian4"></div>
			<div class="shuxian5"></div>
			<div class="shuxian6"></div>
			<div class="shuxian7"></div>
			<div class="shuxian8"></div>
			<div class="shuxian9"></div>
			<div class="shuxian10"></div>
			<div class="shuxian11" id="shuxian"></div>
			<div class="shuxian12" id="shuxian"></div>
			<div class="shuxian13" id="shuxian"></div>
			<div class="shuxian14" id="shuxian"></div>
			<div class="shuxian15" id="shuxian"></div>
			<div class="shuxian16" id="shuxian"></div>
			<div class="shuxian17" id="shuxian"></div>
			<div class="shuxian18" id="shuxian"></div>
			<div class="shuxian19" id="shuxian"></div>
			<div class="shuxian20" id="shuxian"></div>
			<div class="shuxian21" id="shuxian"></div>
			<div class="shuxian22" id="shuxian"></div>
			<div class="shuxian23" id="shuxian"></div>
			<div class="shuxian24" id="shuxian"></div>
			<div class="shuxian25" id="shuxian"></div>
			<div class="shuxian26" id="shuxian"></div>
			<div class="shuxian27" id="shuxian"></div>
			<div class="shuxian28" id="shuxian"></div>
			<div class="shuxian29" id="shuxian"></div>
			<div class="shuxian30" id="shuxian"></div>
			<div class="shuxian31" id="shuxian"></div>
			<div class="shuxian32" id="shuxian"></div>
			<div class="shuxian33" id="shuxian"></div>
			<div class="shuxian34" id="shuxian"></div>
			<div class="shuxian35" id="shuxian"></div>
			<div class="shuxian36" id="shuxian"></div>
			<div class="shuxian37" id="shuxian"></div>
			<div class="shuxian38" id="shuxian"></div>
			<div class="shuxian39" id="shuxian"></div>
			<div class="shuxian40" id="shuxian"></div>
			<div class="shuxian41" id="shuxian"></div>
			<div class="shuxian42" id="shuxian"></div>
			<div class="shuxian43" id="shuxian"></div>
			<div class="shuxian44" id="shuxian"></div>
			<div class="shuxian45" id="shuxian"></div>
			<div class="shuxian46" id="shuxian"></div>
			<div class="shuxian47" id="shuxian"></div>
			<div class="shuxian48" id="shuxian"></div>
			<div class="shuxian49" id="shuxian"></div>
			<div class="shuxian50" id="shuxian"></div>
		</div>
		<div id="bar4">
			<div id="persent"></div>
			<div id="fugai4"></div>
			<div class="hengxian1"></div>
			<div class="hengxian2"></div>
			<div class="hengxian3"></div>
			<div class="hengxian4"></div>
			<div class="shuxian1"></div>
			<div class="shuxian2"></div>
			<div class="shuxian3"></div>
			<div class="shuxian4"></div>
			<div class="shuxian5"></div>
			<div class="shuxian6"></div>
			<div class="shuxian7"></div>
			<div class="shuxian8"></div>
			<div class="shuxian9"></div>
			<div class="shuxian10"></div>
			<div class="shuxian11" id="shuxian"></div>
			<div class="shuxian12" id="shuxian"></div>
			<div class="shuxian13" id="shuxian"></div>
			<div class="shuxian14" id="shuxian"></div>
			<div class="shuxian15" id="shuxian"></div>
			<div class="shuxian16" id="shuxian"></div>
			<div class="shuxian17" id="shuxian"></div>
			<div class="shuxian18" id="shuxian"></div>
			<div class="shuxian19" id="shuxian"></div>
			<div class="shuxian20" id="shuxian"></div>
			<div class="shuxian21" id="shuxian"></div>
			<div class="shuxian22" id="shuxian"></div>
			<div class="shuxian23" id="shuxian"></div>
			<div class="shuxian24" id="shuxian"></div>
			<div class="shuxian25" id="shuxian"></div>
			<div class="shuxian26" id="shuxian"></div>
			<div class="shuxian27" id="shuxian"></div>
			<div class="shuxian28" id="shuxian"></div>
			<div class="shuxian29" id="shuxian"></div>
			<div class="shuxian30" id="shuxian"></div>
			<div class="shuxian31" id="shuxian"></div>
			<div class="shuxian32" id="shuxian"></div>
			<div class="shuxian33" id="shuxian"></div>
			<div class="shuxian34" id="shuxian"></div>
			<div class="shuxian35" id="shuxian"></div>
			<div class="shuxian36" id="shuxian"></div>
			<div class="shuxian37" id="shuxian"></div>
			<div class="shuxian38" id="shuxian"></div>
			<div class="shuxian39" id="shuxian"></div>
			<div class="shuxian40" id="shuxian"></div>
			<div class="shuxian41" id="shuxian"></div>
			<div class="shuxian42" id="shuxian"></div>
			<div class="shuxian43" id="shuxian"></div>
			<div class="shuxian44" id="shuxian"></div>
			<div class="shuxian45" id="shuxian"></div>
			<div class="shuxian46" id="shuxian"></div>
			<div class="shuxian47" id="shuxian"></div>
			<div class="shuxian48" id="shuxian"></div>
			<div class="shuxian49" id="shuxian"></div>
			<div class="shuxian50" id="shuxian"></div>
		</div>
		<div id="bar5">
			<div id="persent"></div>
			<div id="fugai5"></div>
			<div class="hengxian1"></div>
			<div class="hengxian2"></div>
			<div class="hengxian3"></div>
			<div class="hengxian4"></div>
			<div class="shuxian1"></div>
			<div class="shuxian2"></div>
			<div class="shuxian3"></div>
			<div class="shuxian4"></div>
			<div class="shuxian5"></div>
			<div class="shuxian6"></div>
			<div class="shuxian7"></div>
			<div class="shuxian8"></div>
			<div class="shuxian9"></div>
			<div class="shuxian10"></div>
			<div class="shuxian11" id="shuxian"></div>
			<div class="shuxian12" id="shuxian"></div>
			<div class="shuxian13" id="shuxian"></div>
			<div class="shuxian14" id="shuxian"></div>
			<div class="shuxian15" id="shuxian"></div>
			<div class="shuxian16" id="shuxian"></div>
			<div class="shuxian17" id="shuxian"></div>
			<div class="shuxian18" id="shuxian"></div>
			<div class="shuxian19" id="shuxian"></div>
			<div class="shuxian20" id="shuxian"></div>
			<div class="shuxian21" id="shuxian"></div>
			<div class="shuxian22" id="shuxian"></div>
			<div class="shuxian23" id="shuxian"></div>
			<div class="shuxian24" id="shuxian"></div>
			<div class="shuxian25" id="shuxian"></div>
			<div class="shuxian26" id="shuxian"></div>
			<div class="shuxian27" id="shuxian"></div>
			<div class="shuxian28" id="shuxian"></div>
			<div class="shuxian29" id="shuxian"></div>
			<div class="shuxian30" id="shuxian"></div>
			<div class="shuxian31" id="shuxian"></div>
			<div class="shuxian32" id="shuxian"></div>
			<div class="shuxian33" id="shuxian"></div>
			<div class="shuxian34" id="shuxian"></div>
			<div class="shuxian35" id="shuxian"></div>
			<div class="shuxian36" id="shuxian"></div>
			<div class="shuxian37" id="shuxian"></div>
			<div class="shuxian38" id="shuxian"></div>
			<div class="shuxian39" id="shuxian"></div>
			<div class="shuxian40" id="shuxian"></div>
			<div class="shuxian41" id="shuxian"></div>
			<div class="shuxian42" id="shuxian"></div>
			<div class="shuxian43" id="shuxian"></div>
			<div class="shuxian44" id="shuxian"></div>
			<div class="shuxian45" id="shuxian"></div>
			<div class="shuxian46" id="shuxian"></div>
			<div class="shuxian47" id="shuxian"></div>
			<div class="shuxian48" id="shuxian"></div>
			<div class="shuxian49" id="shuxian"></div>
			<div class="shuxian50" id="shuxian"></div>
		</div>
	</div>
	<script>


	// textCss










	// var number = Math.floor(Math.random()*100);


	// var fugai =document.getElementById('bar');
	// var persent=document.getElementById('persent');
	// var step=1;
	// var oWidth=100;

	
		
	// 		var timerId1 =setInterval(function(){


	// 			for(oWidth-=step;oWidth;oWidth+=step)


	// 			fugai.style.width=oWidth+"%";
	// 			if(oWidth==10){
	// 					clearInterval(timerId1);
	// 			}
	// 		},100);
			
		
	




	
	
	//bar.style.width="300px";

	// var timerId1 =setInterval(function(){
	// 	oWidth-=step;
	// 	fugai.style.width=oWidth+"%";
	// 	if(oWidth==10){
	// 		clearInterval(timerId1);
	// 	}
	// },100);
	// var timerId2 =setInterval(function(){
	// 	oWidth+=step;
	// 	if(oWidth==100){
	// 		clearInterval(timerId2);
	// 	}
	// },100);

	
	// for(var i=1;i<=20;i++){
	// 	if(i%2==1){
	// 		var timerId1 =setInterval(function(){
	// 			oWidth-=step;
	// 			fugai.style.width=oWidth+"%";
	// 			if(oWidth==10){
	// 					clearInterval(timerId1);
	// 			}
				
	// 			oWidth+=step;
	// 			fugai.style.width=oWidth+"%";
	// 			if(oWidth==100){
	// 					clearInterval(timerId1);
	// 			}
	// 		},100);
			
	// 	}
	// }






	</script>
</body>
</html>